<template>
  <div>
    <div class="bg" :style="{ height: Height }">
      <div class="bg-rule" @click="ruleFn">活动规则</div>
      <div class="bg-top" id="bg_top" @click="clickFn">
        <div id="bg_top_list">
          <div
            class="preferential"
            v-for="(item, index) in infoList"
            :key="index"
          >
            {{ item.user }}
            <div class="preferential-name">{{ item.name }}</div>
            {{ item.receive }}
            <p class="cost">
              <span>{{ item.money }}</span>
            </p>
            {{ item.preferential }}
          </div>
        </div>
        <div id="bg_top_lists"></div>
      </div>
    </div>
    <footer>
      <div class="content">
        <div
          v-for="(item, index) in cardArray"
          class="card"
          :key="index"
          @click="goFulfil(index)"
        >
          <div class="card_left">
            <p>余额满</p>
            <p>
              ￥<span>{{ item.consume }}</span>
            </p>
          </div>
          <div class="card_right">
            <p>
              <span>送</span
              ><span style="display: inline-block">{{
                item.remind_before_day
              }}</span>
            </p>
            <p>{{ item.content }}</p>
          </div>
        </div>
      </div>
      <div class="rule">
        <div class="tufu">
          <div class="tufu1" @click="ruleShow = !ruleShow">
            <img
              v-if="ruleShow"
              class="rule-img"
              :src="require('@/assets/img/duigou.png')"
              alt=""
            />
          </div>
          <a id="aili" :href="this.ruleUrl">已阅读并同意本页面活动规则</a>
        </div>
      </div>
      <div class="footer-top">
        <img :src="require('@/assets/img/maneLeft.png')" alt="" />
        温馨提示
        <img :src="require('@/assets/img/maneRight.png')" alt="" />
      </div>
      <p class="footer-p" v-for="(item, index) in textList" :key="index">
        {{ item.content }}
      </p>
    </footer>
  </div>
</template>
  
<script>
import wx from "weixin-js-sdk";
import { FulfilRecharge } from "@/api/fulfil.js";
import getUrldata from "@/utils/getUrl.js";
import { set } from "vue";
export default {
  data() {
    return {
      cardArray: [],
      textList: [],
      infoList: [],
      Height: "100vh",
      ruleUrl: "",
      accountUrl: "",
      userid_locked: "",
      platform: "",
      isAndroid: false,
      isIOS: false,
      ruleShow: false, // 用户控制是否选择了用户协议
    };
  },
  created() {
    this.isAndroid =
      navigator.userAgent.indexOf("Android") > -1 ||
      navigator.userAgent.indexOf("Linux") > -1;
    this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

    var ua = window.navigator.userAgent.toLowerCase();

    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      this.platform = "applet";
    } else {
      if (this.isAndroid == true) {
        this.platform = "app_android";
      } else if (this.isIOS == true) {
        this.platform = "app_ios";
      }
    }
    let uid = getUrldata("Uid");
    if (uid) {
      this.userid_locked = uid;
      localStorage.setItem("Uid", uid);
    } else {
      this.userid_locked = getUrldata("userid_locked");
      localStorage.setItem("Uid", this.userid_locked);
    } 
    this.Height = "100vh";
  },
  mounted() {
    if(!this.userid_locked){
       uni.redirectTo({ url:'/pages/index/index' })
        return false;
    }
    
    this.getIndexPage();
    var speed = 40;
    // 向上滚动
    var demo = document.getElementById("bg_top");
    var demo2 = document.getElementById("bg_top_lists");
    var demo1 = document.getElementById("bg_top_list");
    setTimeout(() => {
      demo2.innerHTML = demo1.innerHTML;
    }, 1000);
    function Marquee() {
      if (demo.scrollTop >= demo1.offsetHeight) {
        demo.scrollTop = 0;
      } else {
        demo.scrollTop = demo.scrollTop + 1;
      }
    }
    var MyMar = setInterval(Marquee, speed);
    /*   demo.onmouseover = function () {
      clearInterval(MyMar);
    };
    demo.onmouseout = function () {
      MyMar = setInterval(Marquee, speed);
    }; */
  },
  methods: {
    clickFn() {},
    getIndexPage() {
      const data = {
        userid_locked: this.userid_locked,
        platform: this.platform,
      };
      FulfilRecharge(data).then((res) => {
        if (res.data.result_code == 300) {
          this.Height = "9.6625rem";
           this.cardArray = res.data.data.list;
        this.textList = res.data.data.prompt;
        this.infoList = res.data.data.info;
        this.ruleUrl = res.data.data.rule;
        this.accountUrl = res.data.data.url;
        }
       
      });
    },
    goFulfil(i) {
      console.log(i);
      if (this.ruleShow == true) {
        this.$router.push({
          path: "/fulfil",
          query: {
            index: i,
            math: Math.random(),
          },
        });
      } else {
        this.$Toast("请先勾选同意本页面活动规则!");
      }

      // this.$router.push('/fulfil').catch(err => {err})
    },
    ruleFn() {
      window.location.href = this.ruleUrl;
    },
    accountFn() {
      if (this.accountUrl) {
        window.location.href = this.accountUrl;
      }
    },
  },
};
</script>
  
<style lang="less" scoped>
.bg {
  width: 100%;
  background-color: red;
  background-image: url(../../../assets/img/chargingFreebg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 0.5rem;
}
.bg-rule {
  position: absolute;
  top: 0.2rem;
  right: 0.2375rem;
  width: 0.9375rem;
  height: 0.675rem;
  font-size: 0.325rem;
  font-weight: 400;
  color: #b4abfa;
}
.bg-top {
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 5.3rem;
  height: 1.4rem;
  position: relative;
}
.bg_top_list {
  width: 100%;
  height: auto;
  text-align: left;
}
.bg_top_lists {
  width: 100%;
  height: auto;
  text-align: left;
}
.preferential {
  display: flex;
  margin: 0.2rem 1.35rem 0;
  font-size: 0.4rem;
  font-weight: 600;
  color: #333;
}
.preferential-name {
  display: inline-block;
  width: 2.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 900;
  color: #ff0038;
}
.cost {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.5rem;
  font-weight: 900;
  color: #ff0038;
  line-height: 0.1rem;
}

.span_box {
  display: inline-block;
  width: 0.4rem;
  height: 0.6rem;
  background: linear-gradient(180deg, #ff0062 0%, #ff0031 100%);
  margin-right: 0.2rem;
  color: #ffffff;
  text-align: center;
}

.span_box:nth-child(1) {
  margin-left: 0.2rem;
}

.content {
  width: 100%;
  margin-top: 0.75rem;
}

.card {
  width: 95%;
  height: 3.5rem;
  margin: 0.3rem auto;
  background-image: url(../../../assets/img/certificate1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: red;
  position: relative;
}

.card_left {
  position: absolute;
  top: 1rem;
  left: 0.45rem;
  text-align: center;

  p:nth-child(1) {
    font-size: 0.3125rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #666666;
  }

  p:nth-child(2) {
    font-size: 0.4875rem;
    font-family: Source Han Sans SC;
    font-weight: 500;
    color: #342c2c;

    span {
      font-size: 0.825rem;
    }
  }
}

.card_right {
  position: absolute;
  top: 1rem;
  left: 3rem;

  p:nth-child(1) {
    font-size: 0.45rem;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #ff003a;
    margin-bottom: 0.2375rem;
    display: flex;
    justify-content: space-between;

    span:nth-child(1) {
      display: inline-block;
      width: 0.5625rem;
      height: 0.5625rem;
      border-radius: 50%;
      border: 0.025rem solid #ff003a;
      font-size: 0.36rem;
      text-align: center;
      line-height: 0.5625rem;
    }
  }

  p:nth-child(2) {
    width: 4rem;
    height: 0.4875rem;
    font-size: 0.35rem;
    font-weight: 500;
    background: linear-gradient(
      270deg,
      rgba(255, 102, 140, 0.15) 0%,
      rgba(255, 57, 115, 0.15) 100%
    );
    border-radius: 0.05rem;
    color: #ff4a73;
    text-align: center;
    line-height: 0.4875rem;
  }
}
footer {
  padding-bottom: 0.3rem;
  margin-top: -2.625rem;
  overflow: hidden;
  box-sizing: border-box;
  background: #6000eb;
}
.footer-top {
  margin-bottom: 0.5rem;
  height: 0.4rem;
  font-size: 0.45rem;
  font-weight: 400;
  color: #d1aafa;
  text-align: center;
  img {
    padding-bottom: 0.1rem;
    display: inline-block;
  }
}
.footer-p {
  width: 90%;
  margin: 0.3rem 5% 0;
  font-size: 0.4rem;
  font-weight: 400;
  color: #d1aafa;
}
.footer-account {
  color: #ff003a;
  font-size: 0.43rem;
}
.rule {
  padding-left: 25%;
  margin: 0.3rem 0;
  box-sizing: border-box;
}
#aili {
  display: inline-block;
  flex: 1;
  margin-left: 0.15rem;
  font-size: 0.4rem;
  color: rgba(254, 237, 214, 1);
}
.tufu {
  display: flex;
  width: 100%;
  height: 0.4rem;
}

.tufu .tufu1 {
  margin-top: 0.03rem;
  width: 0.4rem;
  height: 0.4rem;
  background-image: linear-gradient(
    0deg,
    rgba(249, 220, 170, 0.99),
    rgba(255, 240, 223, 0.99)
  );
}
.rule-img {
  width: 0.4rem;
  height: 0.4rem;
}
</style>